<template>
  <div class="container">
    <div class="box1">
      <el-card class="dashboard-pie">
        <span>文章分类统计</span>
        <div
          style="height: 500px; width: 500px; margin: 0 auto"
          ref="echartPie"
        ></div>
      </el-card>
      <el-card class="dashboard-table">
        <span>文章阅读量排行榜</span>
        <el-table
          :data="article"
          style="min-width: 540px; font-size: 15px; margin-top: 10px"
        >
          <el-table-column label="标题">
            <template slot-scope="scope">
              <el-link @click="onClick(scope.row.id)" :underline="false">{{
                scope.row.title
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time" style="font-size: 12px"></i>
              <span style="margin-left: 10px; font-size: 12px">{{
                scope.row.time
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读量" width="100px"
            ><template slot-scope="scope">
              <span>{{ scope.row.views }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-card class="dashboard-bar">
      <span>分类浏览量和点赞量</span>
      <div
        style="height: 500px; width: 1400px; margin: 0 auto"
        ref="echartBar"
      ></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  data() {
    return {
      dataPie: [],
      dataBar: [],
      article: [],
    };
  },
  mounted() {
    this.getSort();
    // console.log("000");
    this.getArticle();
  },
  methods: {
    //获取分类数据
    getSort() {
      this.$http.get("/category/getCategorys").then((res) => {
        const { code, result } = res;
        // console.log(result.data[0]);
        if (code !== 0) return;
        this.dataPie = result.data[0].map((item) => {
          return { name: item.name, value: item.sort_articles };
        });
        this.dataBar = result.data[0].map((item) => {
          return {
            name: item.name,
            views: item.sort_views,
            praise: item.sort_praise,
          };
        });
        // console.log(this.dataBar);
        this.echartsPie();
        this.echartsBar();
      });
    },
    //饼状图
    echartsPie() {
      var chartDom = this.$refs.echartPie;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        //颜色
        color: [
          "#ff7f50",
          "#87cefa",
          "#da70d6",
          "#32cd32",
          "#6495ed",
          "#ff69b4",
          "#ba55d3",
          "#cd5c5c",
          "#ffa500",
          "#40e0d0",
          "#1e90ff",
          "#ff6347",
          "#7b68ee",
          "#00fa9a",
          "#ffd700",
          "#6699FF",
          "#ff6666",
          "#3cb371",
          "#b8860b",
          "#30e0e0",
        ],
        //图例
        legend: {
          bottom: 20,
        },
        //工具箱
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        //提示框
        tooltip: {
          trigger: "item", //触发类型，默认数据触发，可选'item','axis'
          formatter: "Category <br/> {b} : {c} ({d}%)", ////默认值null，内容格式器
        },
        series: [
          {
            type: "pie",
            //radius："15%"控制内圈的大小，"90%"控制外圈的大小
            radius: ["5%", "65%"],
            center: ["50%", "45%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: this.dataPie,
          },
        ],
      };
      option && myChart.setOption(option);
      //建议加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //柱状图
    echartsBar() {
      //处理数据
      let data1 = [],
        data2 = [],
        data3 = [];
      this.dataBar.forEach((item) => {
        data1.push(item.name);
        data2.push(item.views);
        data3.push(item.praise);
      });
      // console.log(this.dataBar);

      //取最大值向上取整
      let intervalY1 = Math.ceil(Math.max(...data2) / 5);
      let intervalY2 = Math.ceil(Math.max(...data3) / 5);

      // 基于准备好的dom，初始化echarts实例
      let echartBar = echarts.init(this.$refs.echartBar);
      // 绘制图表
      echartBar.setOption({
        // 图例
        legend: {
          selectedMode: true, //可点击
          data: ["分类浏览量", "分类点赞量"],
          bottom: 0,
        },
        // 提示框
        tooltip: {
          trigger: "axis", //显示类型，axis用于柱状图
          axisPointer: {
            type: "shadow",
          },
        },
        //图表离容器的距离
        grid: {
          left: 100,
        },
        // x轴样式
        xAxis: [
          {
            type: "category", //类型
            data: data1,
            // data: [
            //   "1月",
            //   "2月",
            //   "3月",
            //   "4月",
            //   "5月",
            //   "6月",
            //   "7月",
            //   "8月",
            //   "9月",
            //   "10月",
            //   "11月",
            //   "12月",
            // ],
            splitLine: {
              //不显示分割线
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "分类浏览量",
            //最小刻度值
            min: 0,
            //最大刻度值
            max: intervalY1 * 5,
            // interval：强制设置坐标轴分割间隔。
            interval: intervalY1,
            // splitNumber：坐标轴的分割段数，预估值，不绝对
            splitNumber: 5,
            splitLine: {
              //显示分割线
              show: true,
            },
          },
          {
            type: "value",
            name: "分类点赞量",
            min: 0,
            max: intervalY2 * 5,
            interval: intervalY2,
            splitNumber: 5,
            splitLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "分类浏览量",
            type: "bar",
            data: data2,
            // data: [
            //   2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
            //   3.3,
            // ],
            itemStyle: {
              color: "rgba(132, 136, 211, 1)",
            },
          },
          {
            name: "分类点赞量",
            type: "line",
            yAxisIndex: 1, //索引从0开始
            data: data3,
            // data: [
            //   2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            // ],
            itemStyle: {
              color: "rgba(91, 245, 204, 1)",
            },
          },
        ],
      });
      // let chart = this.echart2;
      //建议加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      window.addEventListener("resize", () => {
        echartBar.resize();
      });
    },
    //获取阅读量排行榜的文章数据
    getArticle() {
      this.$http.get("/dashboard/getArticles").then((res) => {
        const { code, result } = res;
        // console.log(result);
        if (code == 0) {
          this.article = result.data[0].splice(0, 9);
        }
      });
    },
    //点击跳转对应文章页面
    onClick(id) {
      // console.log(id);
      this.$router.push("/article/getSingleArt/" + id);
    },
  },
};
</script>

<style lang="stylus" scoped>
.container
  .box1
    display flex
    justify-content space-around
    flex-wrap wrap
    .dashboard-pie
      margin-top 5px
      height 550px
      width 800px
    .dashboard-table
      margin-top 5px
      height 550px
      width 800px
  .dashboard-bar
    margin 20px auto
    height 550px
    width 1630px
</style>
